<!--日期-->
<template>
  <div class="search-label mr10">
    <span v-if="showTitle" class="label-title">{{ title }}</span>
    <el-date-picker
      :style="{width: `${width}px`}"
      v-model="queryDate"
      @change="queryDateHandle"
      :type="pickerType"
      unlink-panels
      :clearable="clearable"
      :editable="false"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :value-format="valueFormat"
      :picker-options="pickerOptions"
      :size="size">
    </el-date-picker>
  </div>
</template>
<script>
export default {
  name: 'search-date',
  props: {
    pickerOptions: {
      type: Object,
      default: () => {
      }
    },
    pickerType: {
      type: String,
      default: 'daterange'
    },
    size: {
      type: String,
      default: "small"
    },
    fnType: {
      type: String,
    },
    defaultValue: {
      type: Array,
      default: undefined
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '日期'
    },
    clearable: {
      type: Boolean,
      default: false
    },
    width: {
      type: [Number, String],
      default: 250
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd'
    }
  },
  data() {
    return {
      queryDate: undefined
    }
  },
  created() {
    if (this.defaultValue) {
      this.queryDate = this.defaultValue;
    }
  },
  methods: {
    /** 日期选择*/
    queryDateHandle(val) {
      if (val) {
        this.$emit('select', val)
      } else {
        this.$emit('select', [undefined, undefined])
      }
    },
    componentReset() {
      this.queryDate = this.defaultValue;
      this.$emit('select', this.defaultValue)
    },
  }
}
</script>
